Ajax ব্যবহার করে সার্ভার থেকে ডেটা আদান-প্রদানের জন্য সাধারণত GET এবং POST রিকোয়েস্ট ব্যবহার করা হয়। GET রিকোয়েস্ট সাধারণত ডেটা রিট্রাইভ করার জন্য ব্যবহৃত হয়, এবং POST রিকোয়েস্ট ডেটা সাবমিট বা সংরক্ষণের জন্য ব্যবহৃত হয়। নিচে GET এবং POST রিকোয়েস্টের মাধ্যমে Ajax কাজ করার বিস্তারিত ব্যাখ্যা দেওয়া হলো।
GET রিকোয়েস্ট সাধারণত ডেটা রিট্রাইভ করার জন্য ব্যবহার করা হয়। এটি সার্ভার থেকে ডেটা আনতে URL প্যারামিটারের মাধ্যমে তথ্য প্রেরণ করে।
function fetchData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.txt", true); // GET রিকোয়েস্ট সেটআপ
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("result").innerHTML = xhr.responseText; // DOM আপডেট
} else {
console.error("Error loading data");
}
};
xhr.send(); // রিকোয়েস্ট পাঠানো
}
<button onclick="fetchData()">Load Data</button>
<div id="result"></div>
POST রিকোয়েস্ট ব্যবহার করে ডেটা সার্ভারে পাঠানো হয়, যেমন ফর্ম ডেটা বা ব্যবহারকারীর ইনপুট। এটি সাধারণত ডেটা সাবমিট বা সংরক্ষণ করার জন্য ব্যবহৃত হয়।
function sendData() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "server.php", true); // POST রিকোয়েস্ট সেটআপ
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // কন্টেন্ট টাইপ
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("response").innerHTML = xhr.responseText; // DOM আপডেট
} else {
console.error("Error sending data");
}
};
xhr.send("name=John&age=30"); // ডেটা পাঠানো
}
<button onclick="sendData()">Send Data</button>
<div id="response"></div>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$name = $_POST['name'];
$age = $_POST['age'];
echo "Name: $name, Age: $age";
}
?>
| GET | POST |
|---|---|
| ডেটা URL এর মাধ্যমে প্রেরণ করা হয়। | ডেটা HTTP বডির মাধ্যমে প্রেরণ করা হয়। |
| URL-এ সীমিত পরিমাণ ডেটা পাঠানো যায়। | অনেক বড় পরিমাণ ডেটা পাঠানো যায়। |
| সাধারণত ডেটা রিট্রাইভের জন্য ব্যবহৃত হয়। | ডেটা সংরক্ষণ বা সাবমিটের জন্য ব্যবহৃত হয়। |
| তুলনামূলক দ্রুত এবং ক্যাশ করা যায়। | তুলনামূলক ধীর এবং ক্যাশ করা যায় না। |
$.get("data.txt", function (data) {
$("#result").html(data); // DOM আপডেট
});
$.post("server.php", { name: "John", age: 30 }, function (response) {
$("#response").html(response); // DOM আপডেট
});
onerror বা catch ব্লক ব্যবহার করে সঠিকভাবে হ্যান্ডেল করুন।Ajax এর GET এবং POST রিকোয়েস্ট ওয়েব অ্যাপ্লিকেশনে দ্রুত ডেটা লোড এবং সাবমিশনের মাধ্যমে ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। দুটি রিকোয়েস্টের মধ্যে পার্থক্য বুঝে সঠিকভাবে প্রয়োগ করা অত্যন্ত গুরুত্বপূর্ণ।
Ajax এর মাধ্যমে GET রিকোয়েস্ট ব্যবহার করে ডেটা রিকোয়েস্ট করার একটি সাধারণ পদ্ধতি হলো XMLHttpRequest অবজেক্ট ব্যবহার করা। GET রিকোয়েস্ট সাধারণত সার্ভার থেকে ডেটা ফেচ বা আনার জন্য ব্যবহৃত হয় এবং এটি সহজ ও কার্যকর। নিচে একটি পূর্ণাঙ্গ উদাহরণ এবং এর ধাপে ধাপে ব্যাখ্যা দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET Request Example</title>
</head>
<body>
<h1>Fetch Data Using GET Request</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- GET রিকোয়েস্টের মাধ্যমে প্রাপ্ত ডেটা এখানে দেখানো হবে -->
</div>
<script src="app.js"></script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<h1>), একটি বোতাম (<button>), এবং একটি <div> এলিমেন্ট রয়েছে।fetchData() ফাংশন কল হবে, যা GET রিকোয়েস্ট করবে।data-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে Ajax GET রিকোয়েস্টের মাধ্যমে প্রাপ্ত ডেটা ডায়নামিকভাবে দেখানো হবে।function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট ওপেন করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
if (xhr.status === 200) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else {
// যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("data-container").innerHTML = "Error fetching data!";
}
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
বিস্তারিত ব্যাখ্যা:
১. XMLHttpRequest অবজেক্ট তৈরি করা:
fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা GET রিকোয়েস্ট পরিচালনা করবে।২. রিকোয়েস্ট ওপেন করা:
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।"GET" মেথড ব্যবহার করা হয়েছে, যা সার্ভার থেকে ডেটা আনার জন্য ব্যবহৃত হয়।"https://jsonplaceholder.typicode.com/posts/1" URL থেকে ডেটা ফেচ করা হবে। এটি একটি ডেমো API যা JSON ডেটা প্রদান করে।true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চালানো হবে।৩. রেসপন্স হ্যান্ডলিং:
xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।data-container ডিভে) আপডেট করা হয়েছে।৪. রিকোয়েস্ট পাঠানো:
xhr.send(); মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।এই উদাহরণে, আমরা একটি JSONPlaceholder API ব্যবহার করেছি যা নিচের মতো JSON ডেটা প্রদান করে:
{
"userId": 1,
"id": 1,
"title": "Sample Title",
"body": "This is a sample body text."
}
fetchData() ফাংশন কল হয়।readyState এবং status চেক করে রিকোয়েস্ট সফল হলে ডেটা প্রসেস এবং DOM আপডেট করা হয়।এই ধাপগুলো অনুসরণ করে আপনি সহজেই Ajax GET রিকোয়েস্ট ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করতে পারেন এবং আপনার ওয়েব পেজে ডায়নামিক কন্টেন্ট আপডেট করতে পারেন।
Ajax এর মাধ্যমে POST রিকোয়েস্ট ব্যবহার করে ডেটা পাঠানো হয় যখন ক্লায়েন্ট থেকে সার্ভারে ডেটা সাবমিট বা আপডেট করতে হয়। POST রিকোয়েস্ট সাধারণত ফর্ম ডেটা, JSON ডেটা, বা অন্য কোনো কাস্টম ডেটা সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়। এটি GET রিকোয়েস্টের তুলনায় বেশি নিরাপদ, কারণ ডেটা URL এর পরিবর্তে রিকোয়েস্টের বডিতে পাঠানো হয়। নিচে POST রিকোয়েস্টের মাধ্যমে ডেটা পাঠানোর একটি পূর্ণাঙ্গ উদাহরণ এবং এর ব্যাখ্যা দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POST Request Example</title>
</head>
<body>
<h1>Send Data Using POST Request</h1>
<form id="data-form">
<input type="text" id="title" placeholder="Title" required />
<textarea id="body" placeholder="Body" required></textarea>
<button type="button" onclick="sendData()">Submit</button>
</form>
<div id="response-container">
<!-- সার্ভার রেসপন্স এখানে দেখানো হবে -->
</div>
<script src="app.js"></script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<h1>), একটি ফর্ম (<form>), এবং একটি <div> এলিমেন্ট রয়েছে।<input> এবং <textarea>) রয়েছে যেখানে ইউজার ডেটা প্রবেশ করতে পারে।onclick ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে, যা sendData() ফাংশন কল করবে এবং POST রিকোয়েস্ট পাঠাবে।response-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে POST রিকোয়েস্টের রেসপন্স দেখানো হবে।function sendData() {
// ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করা
var title = document.getElementById("title").value;
var body = document.getElementById("body").value;
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট ওপেন করা
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
// কনটেন্ট টাইপ সেট করা (JSON ডেটা পাঠানোর জন্য)
xhr.setRequestHeader("Content-Type", "application/json");
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
if (xhr.status === 201) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা (201 মানে রিসোর্স তৈরি হয়েছে)
var responseData = JSON.parse(xhr.responseText); // JSON রেসপন্স প্রসেস করা
document.getElementById("response-container").innerHTML = `
<h3>Response:</h3>
<p>ID: ${responseData.id}</p>
<p>Title: ${responseData.title}</p>
<p>Body: ${responseData.body}</p>
`;
} else {
// যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("response-container").innerHTML = "Error sending data!";
}
}
};
// JSON ডেটা তৈরি করা এবং রিকোয়েস্ট পাঠানো
var data = JSON.stringify({ title: title, body: body });
xhr.send(data);
}
বিস্তারিত ব্যাখ্যা:
১. ইনপুট ডেটা সংগ্রহ করা:
sendData() ফাংশনে ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করা হয়েছে (title এবং body)।২. XMLHttpRequest অবজেক্ট তৈরি করা:
XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা POST রিকোয়েস্ট পরিচালনা করবে।৩. রিকোয়েস্ট ওপেন করা:
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true); মেথড ব্যবহার করে একটি POST রিকোয়েস্ট সেটআপ করা হয়েছে।"POST" মেথড ব্যবহার করা হয়েছে, কারণ আমরা সার্ভারে ডেটা পাঠাচ্ছি।"https://jsonplaceholder.typicode.com/posts" URL যেখানে ডেটা পাঠানো হবে।true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে।৪. রিকোয়েস্ট হেডার সেট করা:
xhr.setRequestHeader("Content-Type", "application/json"); মেথড ব্যবহার করে রিকোয়েস্ট হেডার সেট করা হয়েছে, যাতে সার্ভার জানে আমরা JSON ডেটা পাঠাচ্ছি।৫. রেসপন্স হ্যান্ডলিং:
xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 201)।201 স্ট্যাটাস কোড নির্দেশ করে যে রিকোয়েস্ট সফল এবং সার্ভারে নতুন রিসোর্স তৈরি হয়েছে।response-container ডিভে) আপডেট করা হয়েছে।৬. রিকোয়েস্ট পাঠানো:
xhr.send(data) মেথডের মাধ্যমে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।এই উদাহরণে, আমরা একটি ডেমো API (https://jsonplaceholder.typicode.com/posts) ব্যবহার করেছি, যা POST রিকোয়েস্টে নতুন রিসোর্স তৈরি করে। এটি সাধারণত নিচের মতো JSON রেসপন্স প্রদান করে:
{
"id": 101,
"title": "Sample Title",
"body": "This is a sample body text."
}
sendData() ফাংশন কল হয়।Content-Type হেডার সেট করা হয়েছে।readyState এবং status চেক করে POST রিকোয়েস্ট সফল হলে ডেটা প্রসেস এবং DOM আপডেট করা হয়।এই ধাপগুলো অনুসরণ করে আপনি সহজেই Ajax POST রিকোয়েস্ট ব্যবহার করে সার্ভারে ডেটা পাঠাতে পারেন এবং আপনার ওয়েব পেজে ডায়নামিক কন্টেন্ট আপডেট করতে পারেন।
Ajax ব্যবহার করে সার্ভার রেসপন্স এবং ডেটা প্রসেসিং করা হলো একটি গুরুত্বপূর্ণ ধাপ, যেখানে সার্ভার থেকে প্রাপ্ত ডেটা (রেসপন্স) গ্রহণ করা হয় এবং সেটিকে ব্যবহার করে UI বা HTML DOM আপডেট করা হয়। Ajax রিকোয়েস্ট সম্পন্ন হলে XMLHttpRequest অবজেক্টের মাধ্যমে সার্ভার রেসপন্স হ্যান্ডল করা হয়। নিচে Server Response এবং Data Processing এর বিস্তারিত ব্যাখ্যা, উদাহরণ এবং ধাপগুলো তুলে ধরা হলো।
onreadystatechange ইভেন্ট হ্যান্ডলার:XMLHttpRequest অবজেক্টের onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্টের অবস্থা চেক করা হয়।readyState === 4), আমরা চেক করি যে রিকোয়েস্ট সফল হয়েছে কিনা (status === 200)।JSON.parse() মেথড দিয়ে JavaScript অবজেক্টে কনভার্ট করা হয়।নিচে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো যেখানে সার্ভার থেকে JSON ডেটা প্রাপ্ত এবং তা প্রসেস করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Response Example</title>
</head>
<body>
<h1>Fetch and Display Data</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- সার্ভার থেকে প্রাপ্ত ডেটা এখানে দেখানো হবে -->
</div>
<script src="app.js"></script>
</body>
</html>
function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট ওপেন করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
if (xhr.status === 200) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
// HTML ডকুমেন্টে ডেটা দেখানো
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else {
// যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("data-container").innerHTML = "Error fetching data!";
}
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
১. XMLHttpRequest অবজেক্ট তৈরি:
fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।২. রিকোয়েস্ট ওপেন করা:
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে।৩. রেসপন্স হ্যান্ডলিং:
xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং সফল হয়েছে কিনা (xhr.status === 200)।JSON.parse() মেথড দিয়ে JavaScript অবজেক্টে কনভার্ট করা হয়েছে।data-container ডিভে ডেটা আপডেট করা হয়েছে।৪. এরর ম্যানেজমেন্ট:
এই উদাহরণে, আমরা একটি JSONPlaceholder API ব্যবহার করেছি, যা নিচের মতো JSON ডেটা প্রদান করে:
{
"userId": 1,
"id": 1,
"title": "Sample Title",
"body": "This is a sample body text."
}
JSON.parse() দিয়ে তা JavaScript অবজেক্টে কনভার্ট করা হয়েছে।data-container ডিভে ইনজেক্ট করা হয়েছে, যাতে ইউজার পেজ রিলোড ছাড়াই ডেটা দেখতে পারে।readyState এবং status চেক করে রিকোয়েস্ট সম্পূর্ণ এবং সফল হয়েছে কিনা যাচাই করা।JSON.parse() ব্যবহার করে JavaScript অবজেক্টে কনভার্ট করা এবং তা প্রসেস করা।এই ধাপগুলো অনুসরণ করে Ajax এর মাধ্যমে সার্ভার থেকে ডেটা ফেচ করে সেটিকে প্রসেস করা এবং UI আপডেট করা সম্ভব। এটি ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করে তোলে।
Ajax ব্যবহার করে GET এবং POST রিকোয়েস্ট তৈরি করা হয় সার্ভারের সাথে ডেটা আদান-প্রদান করার জন্য। GET রিকোয়েস্ট সাধারণত সার্ভার থেকে ডেটা ফেচ করার জন্য ব্যবহৃত হয়, আর POST রিকোয়েস্ট ব্যবহার করা হয় ক্লায়েন্ট থেকে সার্ভারে ডেটা সাবমিট করার জন্য। নিচে GET এবং POST রিকোয়েস্টের উদাহরণসহ বিস্তারিত আলোচনা করা হলো।
GET রিকোয়েস্ট ব্যবহার করে আমরা সার্ভার থেকে ডেটা ফেচ করব এবং HTML ডকুমেন্টে তা দেখাবো।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET Request Example</title>
</head>
<body>
<h1>Fetch Data Using GET Request</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- GET রিকোয়েস্টের মাধ্যমে প্রাপ্ত ডেটা এখানে দেখানো হবে -->
</div>
<script src="get-request.js"></script>
</body>
</html>
function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট ওপেন করা
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সম্পূর্ণ এবং সফল হয়েছে কিনা তা চেক করা
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else if (xhr.readyState === 4) {
// যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("data-container").innerHTML = "Error fetching data!";
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
বিস্তারিত ব্যাখ্যা:
fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে।xhr.open("GET", "URL", true) দিয়ে একটি GET রিকোয়েস্ট সেট করা হয়েছে।onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্ট সফল হয়েছে কিনা চেক করা হয়েছে এবং সফল হলে JSON ডেটা HTML এ দেখানো হয়েছে।POST রিকোয়েস্ট ব্যবহার করে আমরা ক্লায়েন্ট থেকে ইনপুট ডেটা সার্ভারে পাঠাবো এবং সেই রেসপন্স HTML ডকুমেন্টে দেখাবো।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POST Request Example</title>
</head>
<body>
<h1>Send Data Using POST Request</h1>
<form id="data-form">
<input type="text" id="title" placeholder="Title" required />
<textarea id="body" placeholder="Body" required></textarea>
<button type="button" onclick="sendData()">Submit</button>
</form>
<div id="response-container">
<!-- POST রিকোয়েস্টের মাধ্যমে প্রাপ্ত রেসপন্স এখানে দেখানো হবে -->
</div>
<script src="post-request.js"></script>
</body>
</html>
function sendData() {
// ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করা
var title = document.getElementById("title").value;
var body = document.getElementById("body").value;
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট ওপেন করা
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
// কনটেন্ট টাইপ সেট করা (JSON ডেটা পাঠানোর জন্য)
xhr.setRequestHeader("Content-Type", "application/json");
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 201) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
var responseData = JSON.parse(xhr.responseText); // JSON রেসপন্স প্রসেস করা
document.getElementById("response-container").innerHTML = `
<h3>Response:</h3>
<p>ID: ${responseData.id}</p>
<p>Title: ${responseData.title}</p>
<p>Body: ${responseData.body}</p>
`;
} else if (xhr.readyState === 4) {
// যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("response-container").innerHTML = "Error sending data!";
}
};
// JSON ডেটা তৈরি করা এবং রিকোয়েস্ট পাঠানো
var data = JSON.stringify({ title: title, body: body });
xhr.send(data);
}
বিস্তারিত ব্যাখ্যা:
XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে।xhr.open("POST", "URL", true) দিয়ে POST রিকোয়েস্ট সেট করা হয়েছে।xhr.setRequestHeader("Content-Type", "application/json") দিয়ে রিকোয়েস্টের কনটেন্ট টাইপ সেট করা হয়েছে।এই উদাহরণগুলো অনুসরণ করে GET এবং POST রিকোয়েস্টের মাধ্যমে কিভাবে Ajax ব্যবহার করে ডেটা আদান-প্রদান করা যায় তা সহজে বোঝা যায়।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
